<template>
    <div style="height: 100vh; width: 100%;">
      <relation-graph ref="graphRef" :options="graphOptions">
        <template #node="{ node }">
          <!-- 自定义真实表节点的样式 -->
          <div v-if="!node.isVirtual" class="custom-table-node" :style="{ borderColor: node.borderColor }">
            <div class="table-name">{{ node.text }}</div>
            <div class="table-fields">
              <div v-for="(field, index) in node.data.fields" :key="index" class="field-item">
                <span class="field-name">{{ field.name }}</span>
                <span class="field-type">({{ field.type }})</span>
                <!-- 可以添加主键、外键等标识 -->
                <span v-if="field.isPrimaryKey" class="pk-tag">PK</span>
              </div>
            </div>
          </div>
  
          <!-- 自定义虚拟关联节点的样式 -->
          <div v-else class="virtual-process-node">
            {{ node.text }}
          </div>
        </template>
      </relation-graph>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import RelationGraph from 'relation-graph-vue3';
  
  const graphRef = ref(null);
  
  // 图谱配置
  const graphOptions = ref({
    layouts: [
      {
        layoutName: 'tree',
        from: 'left',
        min_per_width: 100,
        max_per_width: 100,
        min_per_height: 80 // 调整垂直间距以适应虚拟节点
      }
    ],
    defaultNodeBorderColor: '#ddd',
    defaultNodeBorderWidth: 1,
    defaultLineColor: '#aaa',
    defaultLineWidth: 1,
    disableDragNode: false // 允许拖动以调整布局
  });
  
  // 构建图谱数据
  const jsonData = ref({
    nodes: [
      // 源表
      {
        id: 'rs1',
        text: 'RS-1',
        borderColor: '#e53935', // 红色边框，模仿图片
        data: {
          fields: [
            { name: 'FirstName', type: 'varchar' },
            { name: 'LastName', type: 'varchar' },
            { name: 'BusinessEntityID', type: 'int' },
            { name: 'HireDate', type: 'date' }
          ]
        }
      },
      // 目标表
      {
        id: 'hiredate_view',
        text: 'hiredate_view',
        borderColor: '#4caf50', // 绿色边框，模仿图片
        data: {
          fields: [
            { name: 'FirstName', type: 'varchar' },
            { name: 'LastName', type: 'varchar' },
            { name: 'BusinessEntityID', type: 'int' },
            { name: 'HireDate', type: 'date' }
          ]
        }
      },
      // !!! 核心：为每一对字段关联创建一个虚拟节点
      // 这些节点将作为“连接点”，实现字段到字段的连线效果
      {
        id: 'process_firstname',
        text: '', // 虚拟节点可以没有文本或显示转换逻辑
        isVirtual: true,
        nodeShape: 0, // 圆形，更小更简洁
        width: 2,
        height: 2,
        color: '#555', // 深色小点
        borderColor: 'transparent'
      },
      {
        id: 'process_lastname',
        isVirtual: true,
        nodeShape: 0,
        width: 2,
        height: 2,
        color: '#555',
        borderColor: 'transparent'
      },
      {
        id: 'process_businessentityid',
        isVirtual: true,
        nodeShape: 0,
        width: 2,
        height: 2,
        color: '#555',
        borderColor: 'transparent'
      },
      {
        id: 'process_hiredate',
        isVirtual: true,
        nodeShape: 0,
        width: 2,
        height: 2,
        color: '#555',
        borderColor: 'transparent'
      }
    ],
    lines: [
      // !!! 核心：定义连线
      // 从源表的“字段区域”连接到虚拟节点
      { from: 'rs1', to: 'process_firstname', text: 'FirstName' },
      { from: 'rs1', to: 'process_lastname', text: 'LastName' },
      { from: 'rs1', to: 'process_businessentityid', text: 'BusinessEntityID' },
      { from: 'rs1', to: 'process_hiredate', text: 'HireDate' },
      // 从虚拟节点连接到目标表的“字段区域”
      { from: 'process_firstname', to: 'hiredate_view', text: 'FirstName' },
      { from: 'process_lastname', to: 'hiredate_view', text: 'LastName' },
      { from: 'process_businessentityid', to: 'hiredate_view', text: 'BusinessEntityID' },
      { from: 'process_hiredate', to: 'hiredate_view', text: 'HireDate' }
    ]
  });
  
  onMounted(() => {
    if (graphRef.value) {
      graphRef.value.setJsonData(jsonData.value, (graphInstance) => {
        graphInstance.zoomToFit(); // 自动缩放以适应视图
      });
    }
  });
  </script>
  
  <style scoped>
  .custom-table-node {
    min-width: 180px;
    background-color: #fff;
    border: 2px solid; /* 使用节点数据中定义的borderColor */
    border-radius: 5px;
    font-family: Arial, sans-serif;
    overflow: hidden;
  }
  
  .table-name {
    background-color: #f5f7fa;
    padding: 8px;
    font-weight: bold;
    text-align: center;
  }
  
  .table-fields {
    padding: 5px 0;
  }
  
  .field-item {
    padding: 4px 12px;
    font-size: 12px;
    border-bottom: 1px dashed #f0f0f0;
    display: flex;
    align-items: center;
  }
  
  .field-item:last-child {
    border-bottom: none;
  }
  
  .field-name {
    margin-right: 8px;
  }
  
  .field-type {
    color: #888;
    font-size: 11px;
    margin-right: 8px;
  }
  
  .pk-tag {
    background-color: #ffeb3b;
    color: #333;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: auto;
  }
  
  /* 虚拟节点的样式 - 将其变为一个小圆点 */
  .virtual-process-node {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #555;
  }
  </style>